<template>
	<view>
		<u-cell-group>
			<u-cell-item title="品牌" :arrow="false" class="u-p-t-10 u-p-b-10">
				<u-input v-if="applyType == 1" :value="brand && brand.label" @tap="showBrandPicker = true" type="select" placeholder="请选择品牌" inputAlign="right"></u-input>
				<view class="" v-if="applyType == 2">
					<text>{{brand && brand.label}}</text>
				</view>
			</u-cell-item>

			<u-gap bg-color="#f5f5f5" :height="10"></u-gap>

			<view class="u-p-l-20">
				<view v-for="(product, index) in form.ProductList" :key="index">
					<u-cell-item title="代码及描述" :arrow="false" :value="product.Value" class="u-p-t-10 u-p-b-10"></u-cell-item>
					<u-cell-item title="库存" :arrow="false" :value="product.StockNumber" class="u-p-t-10 u-p-b-10"></u-cell-item>
					<u-cell-item title="申请数量" :arrow="false" class="u-p-t-10 u-p-b-10">
						<view class="u-flex-col u-col-bottom">
							<u-input v-if="applyType == 1" style="width: 50%;" type="number" :border="true" inputAlign="right" placeholder="" v-model="product.Number"></u-input>
							<text v-if="applyType == 2"> {{product.Number}} </text>
						</view>
					</u-cell-item>
					<block v-if="applyType == 2">
						<u-cell-item title="验收数量" :arrow="false" class="u-p-t-10 u-p-b-10">
							<view class="u-flex-col u-col-bottom">
								<u-input :height="60"  style="width: 50%;" type="number" :border="true" inputAlign="right" placeholder="" v-model="product.CheckNumber"></u-input>
							</view>
						</u-cell-item>
						<u-cell-item title="差异数量" :arrow="false" class="u-p-t-10 u-p-b-10">
							<view class="u-flex-col u-col-bottom">
								<u-input :value="differencesNum(product.Number, product.CheckNumber)" :disabled="true" :height="60"  style="width: 50%;" type="number" :border="false" inputAlign="right" placeholder="" ></u-input>
							</view>
						</u-cell-item>
					</block>
					
					<u-gap bg-color="#f5f5f5" :height="10"></u-gap>
				</view>
			</view>

			<u-cell-item :title="applyType == 1 ? '申请时间': '验收时间'" :arrow="false" class="u-p-t-10 u-p-b-10" :value="form.ApplyTime | date('yyyy-mm-dd hh:MM')"></u-cell-item>
			<u-cell-item title="备注" :arrow="false" class="u-p-t-10 u-p-b-10">
				<view class="u-flex-col u-col-bottom">
					<u-input style="width: 80%;" type="textarea" placeholder="备注" :border="true" inputAlign="right" v-model="form.Remark"></u-input>
				</view>
			</u-cell-item>
		</u-cell-group>

		<u-select :default-value="[brandPickerIndex]" @confirm="onBrandChange" v-model="showBrandPicker" :list="brandList" label-name="Value" value-name="Key"></u-select>
	</view>
</template>

<script>
export default {
	name: 'medals-apply-form',
	props: {
		applyType: {
			type: Number,
			default: 1
		},
		loadForm: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			selectType: 5,

			brandList: [],
			brandPickerIndex: -1,
			brand: null,

			showBrandPicker: false,

			discountPickerIndex: 0,
			showDiscountPicker: false,

			form: {
				BrandId: null,
				ApplyTime: parseInt(new Date().getTime() / 1000),
				Remark: '',
				ProductBaseList: [],
				ProductList: []
			}
		};
	},

	created() {
		if (!this.loadForm) {
			this.getBrandList();
		}
	},

	methods: {
		differencesNum(number, checkNumber) {
			
			let result = 0;
			
			if(!number) {
				number = 0;
			}	
			if(!checkNumber) {
				checkNumber = 0;
			}
			return parseInt(number) - parseInt(checkNumber);
			
		},
		
		initForm(data) {
			if (data) {
				console.log(data);
				this.uuid = data.uuid;
				this.GroupId = data.GroupId;
				if (data.ApplyList && data.ApplyList.length > 0) {
					this.form = Object.assign(this.form, this.$u.deepClone(data.ApplyList[0]));

					if (this.loadForm) {
						this.getBrandList();
						
						if(this.applyType == 2) {
							
							if(data.ApplyList[0].CheckTime) {
								this.form.ApplyTime = data.ApplyList[0].CheckTime;
							}else {
								this.form.ApplyTime = parseInt(new Date().getTime() / 1000);
							}
							this.form.Remark = data.ApplyList[0].CheckRemark;
							
							
						}
					}
				}
			}
		},
		
		getProductName(productId, productList) {
			const product = productList.find(item => item.Key == productId);
			if (product) {
				return product.Value;
			}
			return '';
		},

		onBrandChange(e) {
			if (!e[0].value || !e[0].label) {
				if (this.brandList.length > 0) {
					this.brand = {
						label: this.brandList[0].Value,
						value: this.brandList[0].Key
					};
				} else {
					return false;
				}
			} else {
				this.brand = e[0];
			}
			this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.brand.value);

			this.form.BrandId = this.brand.value;
			this.getProductList(this.brand.value, true);
		},

		getBrandList() {
			this.$u.api
				.getBrandDic({
					SelectType: this.selectType
				})
				.then(res => {
					const { ResultCode, Medals_BrandList } = res;
					if (ResultCode === 1) {
						this.brandList = Medals_BrandList;

						if (this.loadForm) {
							this.$nextTick(() => {
								this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.form.BrandId);
								let currentBrand = this.brandList.find(item => item.Key == this.form.BrandId);
								this.brand = {
									label: currentBrand.Value,
									value: currentBrand.Key
								};
								this.getProductList(currentBrand.value);
							});
						}
					}
				});
		},

		getProductList(brandId, reload) {
			this.$u.api
				.getProductDic({
					SelectType: this.selectType,
					BrandId: brandId
				})
				.then(res => {
					const { ResultCode, ProductList } = res;
					if (ResultCode === 1) {
						this.form.ProductBaseList = ProductList;

						if (!this.loadForm || reload ) {
							ProductList &&
								ProductList.forEach(item => {
									item.ProductId = item.Key;
									item.ModuleInfoId = 0;
									this.$set(item, 'Number', 1);
								});
							this.form.ProductList = ProductList;
						}
						
						if(this.applyType == 2) {
							this.form.ProductList && this.form.ProductList.forEach(item => {
								item.Key = item.ProductId;
								this.$set(item, 'Value', this.getProductName(item.Key, this.form.ProductBaseList))
							})
						}
					}
				});
		}
	}
};
</script>

<style lang="scss"></style>
